<template>
	<view class="wrapper">
		<view style="padding: 20px 0 30px 0;font-size: 16px;">数据</view>
		<view class="data-wrapper">
			<view class="data-content">
				<view class="data-item">
					<view>商户</view>
					<view class="data-item-text">(今日新增)</view>
					<view><span class="data-item-num">{{toadyAddMerchCount}}</span>个</view>
				</view>
				<view class="data-item" style="border-right: 1px solid #fff;">
					<view>商户</view>
					<view class="data-item-text">(今日激活)</view>
					<view><span class="data-item-num">{{toadyActiveTermCount}}</span>个</view>
				</view>
				<view class="data-item">
					<view>商户</view>
					<view class="data-item-text">(累计)</view>
					<view><span class="data-item-num">{{allMerchCount}}</span>个</view>
				</view>
				<view class="data-item">
					<view>下级</view>
					<view class="data-item-text">(累计)</view>
					<view><span class="data-item-num">{{subAgentCount}}</span>个</view>
				</view>
			</view>
		</view>
		<view class="totalData-wrapper">
			<view class="totalData">
				<view class="totalData-item" style="position: relative;">
					<span class="totalData-item-tip">本月</span>
					<view >
						<view class="totalData-item-view">
							<span class="circle"></span>
							<view style="width: calc( 100% - 40px);">新增商户(个)</view>
							<!-- <view><u-icon name="arrow-right"></u-icon></view> -->
						</view>
						<view class="totalData-num">{{monAddMerchCount}}</view>
					</view>
					<view>
						<view class="totalData-item-view">
							<span class="circle"></span>
							<view style="width: calc( 100% - 40px);">激活商户(个)</view>
							<!-- <view><u-icon name="arrow-right"></u-icon></view> -->
						</view>
						<view class="totalData-num">{{monActiveTermCount}}</view>
					</view>
				</view>
				<view class="totalData-item">
					<view class="totalData-item-tip">上月</view>
					<view>
						<view class="totalData-item-view">
							<span class="circle"></span>
							<view style="width: calc( 100% - 40px);">新增商户(个)</view>
							<!-- <view><u-icon name="arrow-right"></u-icon></view> -->
						</view>
						<view class="totalData-num">{{lastMonAddMerchCount}}</view>
					</view>
					<view>
						<view class="totalData-item-view">
							<span class="circle"></span>
							<view style="width: calc( 100% - 40px);">激活商户(个)</view>
							<!-- <view><u-icon name="arrow-right"></u-icon></view> -->
						</view>
						<view class="totalData-num">{{lastMonActiveTermCount}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="chart-wrapper">
			<view class="chart-wrapper-title">
				<view>全部交易额(万元)</view>
				<view class="chart-switch-box">
					<span @click="changeChart()" :class="switchActive?'chart-switch chart-switch-active':'chart-switch'">7天</span>
					<span @click="changeChart()" :class="switchActive?'chart-switch':'chart-switch chart-switch-active'">半年</span>
				</view>
			</view>
			<view class="echart">
				<template v-if="eChartType == 0">
					<qiun-data-charts v-if="lineDataTrx.categories.length > 0" :opts="line.opts" type="column" :chartData="lineDataTrx" />
			
					<div class="none" v-else>暂无数据</div>
				</template>
				<template v-if="eChartType == 1">
					<qiun-data-charts type="ring" :opts="pie.opts" :chartData="pieData" />
				</template>
			</view>
		</view>
		
		<view class="chart-wrapper">
			<view class="chart-wrapper-title">
				<view>商户激活数(个)</view>
				<view class="chart-switch-box">
					<span @click="changeChart1()" :class="switchActive1?'chart-switch chart-switch-active':'chart-switch'">7天</span>
					<span @click="changeChart1()" :class="switchActive1?'chart-switch':'chart-switch chart-switch-active'">半年</span>
				</view>
			</view>
			<view class="echart">
				<template v-if="eChartType == 0">
					<qiun-data-charts v-if="lineDataActive.categories.length > 0" :opts="line.opts" type="column" :chartData="lineDataActive" />
			
					<div class="none" v-else>暂无数据</div>
				</template>
				<template v-if="eChartType == 1">
					<qiun-data-charts type="ring" :opts="pie.opts" :chartData="pieData" />
				</template>
			</view>
		</view>
		<m-footer :tabIdx="2"></m-footer>
	</view>
</template>

<script>
	import {
		echartData,
		dailyData,
		echartTrx,
		echartActive
	} from '_a/data/index';
	import {
		homeData,
		homeDataOne
	} from '_a/home';

	export default {
		data() {
			return {
				value:true,
				value1:true,
				dataNavList: [{
						name: '本人',
						value: 2,
						subList: [{
								title: '激活台数(台)',
								value: '0.00',
								sub: '近30天',
								type: 'number',
								bgColor: '#F6E7EE',
								key: 'activeTermCount'
							},
							{
								title: '伪激活台数(台)',
								value: '0.00',
								sub: '近30天',
								type: 'number',
								bgColor: '#DFECFC',
								key: 'fackActiveTermCount'
							},
							{
								title: '达标商户(个)',
								value: '0.00',
								sub: '近30天',
								type: 'number',
								bgColor: '#DEF9EE',
								key: 'standardMerchCount'
							},
							{
								title: '未达标商户(个)',
								value: '0.00',
								sub: '近30天',
								type: 'number',
								bgColor: '#F7F2D8',
								key: 'nonStandardMerchCount'
							},
							{
								title: '扣款金额(元)',
								value: '0.00',
								sub: '近30天',
								type: 'money',
								bgColor: '#F5E2E3',
								key: 'dedAmount'
							},
							{
								title: '本月交易量(元)',
								value: '0.00',
								sub: '近30天',
								type: 'money',
								bgColor: '#E4F7F6',
								key: 'amountByDays'
							},
							{
								title: '贷记卡交易量(元)',
								value: '0.00',
								sub: '近30天',
								type: 'money',
								bgColor: '#F7F3E2',
								key: 'creditAmountByDays'
							}
							// ,
							// {
							// 	title: '月台均(万元)',
							// 	value: '0.00',
							// 	sub: '近30天',
							// 	type: 'money',
							// 	bgColor: '#D0EBCF',
							// 	key: 'monAveNum'
							// }
						]
					},
					{
						name: '直属代理商',
						value: 0,
						subList: [{
								title: '激活台数(台)',
								value: '0.00',
								sub: '近30天',
								type: 'number',
								bgColor: '#F6E7EE',
								key: 'activeTermCount'
							},
							{
								title: '伪激活台数(台)',
								value: '0.00',
								sub: '近30天',
								type: 'number',
								bgColor: '#DFECFC',
								key: 'fackActiveTermCount'
							},
							{
								title: '达标商户(个)',
								value: '0.00',
								sub: '近30天',
								type: 'number',
								bgColor: '#DEF9EE',
								key: 'standardMerchCount'
							},
							{
								title: '未达标商户(个)',
								value: '0.00',
								sub: '近30天',
								type: 'number',
								bgColor: '#F7F2D8',
								key: 'nonStandardMerchCount'
							},
							{
								title: '扣款金额(元)',
								value: '0.00',
								sub: '近30天',
								type: 'number',
								bgColor: '#F5E2E3',
								key: 'dedAmount'
							},
							{
								title: '本月交易量(元)',
								value: '0.00',
								sub: '近30天',
								type: 'number',
								bgColor: '#E4F7F6',
								key: 'amountByDays'
							},
							{
								title: '贷记卡交易量(元)',
								value: '0.00',
								sub: '近30天',
								type: 'number',
								bgColor: '#F7F3E2',
								key: 'creditAmountByDays'
							}
							// ,
							// {
							// 	title: '月台均(万元)',
							// 	value: '0.00',
							// 	sub: '近30天',
							// 	type: 'number',
							// 	bgColor: '#D0EBCF',
							// 	key: 'monAveNum'
							// }
						]
					},
					{
						name: '团队',
						value: 1,
						subList: [{
								title: '激活台数(台)',
								value: '0.00',
								sub: '近30天',
								type: 'number',
								bgColor: '#F6E7EE',
								key: 'activeTermCount'
							},
							{
								title: '伪激活台数(台)',
								value: '0.00',
								sub: '近30天',
								type: 'number',
								bgColor: '#DFECFC',
								key: 'fackActiveTermCount'
							},
							{
								title: '达标商户(个)',
								value: '0.00',
								sub: '近30天',
								type: 'number',
								bgColor: '#DEF9EE',
								key: 'standardMerchCount'
							},
							{
								title: '未达标商户(个)',
								value: '0.00',
								sub: '近30天',
								type: 'number',
								bgColor: '#F7F2D8',
								key: 'nonStandardMerchCount'
							},
							{
								title: '扣款金额(元)',
								value: '0.00',
								sub: '近30天',
								type: 'number',
								bgColor: '#F5E2E3',
								key: 'dedAmount'
							},
							{
								title: '本月交易量(元)',
								value: '0.00',
								sub: '近30天',
								type: 'number',
								bgColor: '#E4F7F6',
								key: 'amountByDays'
							},
							{
								title: '贷记卡交易量(元)',
								value: '0.00',
								sub: '近30天',
								type: 'number',
								bgColor: '#F7F3E2',
								key: 'creditAmountByDays'
							}
							// ,
							// {
							// 	title: '月台均(万元)',
							// 	value: '0.00',
							// 	sub: '近30天',
							// 	type: 'number',
							// 	bgColor: '#D0EBCF',
							// 	key: 'monAveNum'
							// }
						]
					}
				],
				navIndex: 0,
				line: {
					opts: {
						color: ["#DDE7FF","#d2c3fe","#1890FF","#F7F6FE"],
						dataPointShapeType: 'hollow',
						dataLabel: false,//数据点上的文本显示
						dataPointShape: false,//是否显示数据点的图形标识
						legend: {
							show: false
						},
						xAxis: {
							xAxisHeight:500,
							xÃxisLabelHeight:100,
						    disableGrid: true,
						    // scrollShow: true,//是否显示滚动条
						    itemCount: 7,
							lineFeed:true,//是否换行 
							lineFeedNum:3,//每行字数
							marginLeft:5,//调整x轴文字位置
							lineHeight:40,//调整x轴文字间距
							// fontSize:12,
						},
						yAxis: {
							disableGrid: true,
							data: [{min: 0}]
						},
						extra: {
							column: {
								type: "group",
								width: 20,
								opacity: 0.2,
								gradient: true,
								activeBgColor: "#000000",
								activeBgOpacity: 0.08,
								barBorderRadius: [6,6,6,6]
							}
						}
					}
				},
				// lineDataTrx: {
				// 	categories:['06月05日','06月06日','06月07日','06月08日','06月09日','06月10日'],
				// 	series: [{
				// 		name: '交易量',
				// 		data:[35, 36, 31, 33, 13, 34]
				// 	}]
				// },
				lineDataTrx: {
					categories:[],
					series: [{
						name: '交易量',
						data:[]
					}]
				},
				lineDataActive: {
					categories:[],
					series: [{
						name: '激活量',
						data:[]
					}]
				},
				lineDataTrxSeven: {
					categories:[],
					series: [{
						name: '交易量',
						data:[]
					}]
				},
				lineDataTrxHalfYear: {
					categories:[],
					series: [{
						name: '交易量',
						data:[]
					}]
				},
				lineDataActiveSeven: {
					categories:[],
					series: [{
						name: '激活数',
						data:[]
					}]
				},
				lineDataActiveHalfYear: {
					categories:[],
					series: [{
						name: '激活数',
						data:[]
					}]
				},
				pie: {
					opts: {
						dataLabel: false,
						extra: {
							ring: {
								border: false,
								ringWidth: 20
							}
						},
						title: {
							name: '交易总量',
							fontSize: 14,
							color: '#666666'
						},
						subtitle: {
							name: '7999',
							fontSize: 18,
							color: '#7cb5ec'
						},
						color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc']
					}
				},
				pieData: {
					series: [{
						formatter(v) {
							console.log(v);
						},
						data: []
					}]
				},
				eChartType: 0,
				query: {
					days: 30, //查询田叔叔
					policyCode1: this.$store.getters.policyList[0] ? this.$store.getters.policyList[0].policyCode : '',
					policyCode2: this.$store.getters.policyList[0] ? this.$store.getters.policyList[0].policyCode : ''
				},
				totalType: [{
						value: 1,
						name: 'POS贷记卡'
					},
					{
						value: 2,
						name: 'POS借记卡'
					},
					{
						value: 3,
						name: '云闪付'
					},
					{
						value: 4,
						name: '扫码'
					},
					{
						value: 5,
						name: 'VIP贷记卡'
					},
					{
						value: 6,
						name: 'VIP借记卡'
					},
					{
						value: 7,
						name: '快捷'
					}
				],
				switchActive:true,
				switchActive1:true,
				toadyAddMerchCount: 0,
				toadyActiveTermCount: 0,
				allMerchCount: 0,
				monAddMerchCount: 0,
				monActiveTermCount: 0,
				lastMonAddMerchCount: 0,
				lastMonActiveTermCount: 0,
				subAgentCount: 0
			};
		},
		created() {
			uni.hideTabBar({});
		},
		// 下拉刷新
		async onPullDownRefresh() {
			await this.initData();
			uni.stopPullDownRefresh();
			this.$tip.toast('刷新成功!', 'success', 500);
		},
		onShow() {
			this.initData();
		},
		methods: {
			async initData() {
				// await this.getEchartData();
				// await this.getData();
				await this.getCountData();
				this.getEchartTrxData()
				this.getEchartActiveData()
			},
			confirm(code, myKey) {
				if (myKey == 'ring') {
					//ring
					this.query.policyCode1 = code;
					this.getEchartData();
				} else {
					//line
					this.query.policyCode2 = code;
					this.getData();
				}
			},
			// getEchartData() {
			// 	echartData({
			// 		days: 15,
			// 		policyCode: this.query.policyCode1
			// 	}).then(res => {
			// 		if (res.code == 200) {
			// 			let line = res.data.detail;
			// 			let pie = res.data.sumDetail;
			// 			this.lineData.categories = line
			// 				.map(item => item.transDate)
			// 				.map(item => {
			// 					item = item.slice(8, 10);
			// 					return item;
			// 				});

			// 			this.lineData.series[0].data = line.map(item => item.totalAmount);
			// 			//   环图
			// 			this.pie.opts.subtitle.name = res.data.sumAmount;
			// 			this.pieData.series[0].data = pie.map(item => {
			// 				item.name = this.$options.filters['totalType'](item.totalType) + '(' + item.prop + '%' + ')';
			// 				item.value = item.amount;
			// 				return item;
			// 			});
			// 			// console.log(this.lineData);
			// 		}
			// 	});
			// },
			getEchartTrxData() {
				echartTrx({
					days: 7,
					type: 1,
					policyCode: this.query.policyCode1
				}).then(res => {
					if (res.code == 200) {
						let line = res.data.detail;
						this.lineDataTrxSeven.categories = line
							.map(item => item.date)
							.map(item => {
								// item = item.slice(8, 10);
								// 格式转换：从 "2025-01-13" 到 "1月13日"
								const [year, month, day] = item.split('-');
								return `${month}月${day}日`;
								// return item;
							});
				
						this.lineDataTrxSeven.series[0].data = line.map(item => item.total);
						//判断
						if(this.switchActive) {
							//7天
							this.lineDataTrx = this.lineDataTrxSeven
						}
					}
				});
				echartTrx({
					months: 6,
					type: 1,
					policyCode: this.query.policyCode1
				}).then(res => {
					if (res.code == 200) {
						let line = res.data.detail;
						this.lineDataTrxHalfYear.categories = line
							.map(item => item.date)
							.map(item => {
								// item = item.slice(8, 10);
								const [year, month] = item.split('-');
								return `${month}月`;
								// return item;
							});
						this.lineDataTrxHalfYear.series[0].data = line.map(item => item.total);
						//判断
						if(!this.switchActive) {
							//半年
							this.lineDataTrx = this.lineDataTrxHalfYear
						}
					}
				});
			},
			getEchartActiveData() {
				echartTrx({
					days: 7,
					type: 2,
					policyCode: this.query.policyCode1
				}).then(res => {
					if (res.code == 200) {
						let line = res.data.detail;
						this.lineDataActiveSeven.categories = line
							.map(item => item.date)
							.map(item => {
								// item = item.slice(8, 10);
								// 格式转换：从 "2025-01-13" 到 "1月13日"
								const [year, month, day] = item.split('-');
								return `${month}月${day}日`;
								// return item;
							});
				
						this.lineDataActiveSeven.series[0].data = line.map(item => item.count);
						if(this.switchActive1) {
							this.lineDataActive = this.lineDataActiveSeven
						}
					}
				});
				echartTrx({
					months: 6,
					type: 2,
					policyCode: this.query.policyCode1
				}).then(res => {
					if (res.code == 200) {
						let line = res.data.detail;
						this.lineDataActiveHalfYear.categories = line
							.map(item => item.date)
							.map(item => {
								// item = item.slice(8, 10);
								const [year, month] = item.split('-');
								return `${month}月`;
								// return item;
							});
						this.lineDataActiveHalfYear.series[0].data = line.map(item => item.count);
						if(!this.switchActive1) {
							this.lineDataActive = this.lineDataActiveHalfYear
						}
					}
				});
			},
			// 获取数据
			getCountData() {
				homeData().then(res => {
					if (res.code == 200) {
						let data = res.data;
						this.toadyAddMerchCount = data.toadyAddMerchCount;
						this.toadyActiveTermCount = data.toadyActiveTermCount;
						this.allMerchCount = data.allMerchCount;
						this.monAddMerchCount = data.monAddMerchCount;
						this.monActiveTermCount = data.monActiveTermCount;
						this.lastMonActiveTermCount = data.lastMonActiveTermCount;
					}
				});
				homeDataOne().then(res => {
					if (res.code == 200) {
						let data = res.data;
						this.lastMonAddMerchCount = data.lastMonAddMerchCount;
						this.subAgentCount = data.subAgentCount
					}
				});
			},
			// 获取数据
			getData() {
				// 本人
				dailyData({
					days: this.query.days,
					agentType: 2,
					policyCode: this.query.policyCode2
				}).then(res => {
					if (res.code == 200) {
						let data = res.data;
						this.dataNavList[0].subList = this.formData(this.dataNavList[0].subList, data);
					}
				});
				//   直属
				dailyData({
					days: this.query.days,
					agentType: 0,
					policyCode: this.query.policyCode2
				}).then(res => {
					if (res.code == 200) {
						let data = res.data;
						this.dataNavList[1].subList = this.formData(this.dataNavList[1].subList, data);
					}
				});
				//   团队
				dailyData({
					days: this.query.days,
					agentType: 1,
					policyCode: this.query.policyCode2
				}).then(res => {
					if (res.code == 200) {
						let data = res.data;
						this.dataNavList[2].subList = this.formData(this.dataNavList[2].subList, data);
					}
				});
			},
			// 格式化请求赋值参数
			formData(list, data) {
				list = list.map(subItem => {
					subItem.value = data[subItem.key];
					return subItem;
				});
				return list;
			},
			changeNav(i) {
				this.navIndex = i;
			},
			nav(path) {
				this.$nav.push({
					path: path
				});
			},
			changeEChartType() {
				uni.showActionSheet({
					itemList: ['折线图', '饼图'],
					success: res => {
						this.eChartType = res.tapIndex;
						console.log(res);
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			changeChart(){
				if(this.switchActive == true){
					this.switchActive = false;
					this.lineDataTrx = this.lineDataTrxHalfYear
					console.log('半年交易数据')
					console.log(this.lineDataTrxHalfYear)
				}else{
					this.switchActive = true;
					this.lineDataTrx = this.lineDataTrxSeven
				}
			},
			changeChart1(){
				if(this.switchActive1 == true){
					this.switchActive1 = false;
					this.lineDataActive = this.lineDataActiveHalfYear
				}else{
					this.switchActive1 = true;
					this.lineDataActive = this.lineDataActiveSeven
				}
			}
		}
	};
</script>

<style lang="scss">
	/* 背景色 */
	$top-box-linear-bg:linear-gradient(90deg, #8a61fd, #6b3bff); 
	.wrapper{
		padding: $uni-spacing-row-lg;
		padding-bottom: 70px;
		
	}
	.data-wrapper{
		background: $top-box-linear-bg;
		padding: $uni-spacing-row-base;
		border-radius: $uni-border-radius-xl;
		.data-content{
			display: flex;
			justify-content: space-between;
			width: 100%;
		}
		.data-item{
			width: 25%;
			text-align: center;
			view{
				color: #fff;
			}
			.data-item-text{
				font-size: $uni-font-size-sm;
				line-height: 26px;
				margin-bottom: $uni-spacing-col-base;
			}
			.data-item-num{
				font-size: $uni-font-size-lg;
				font-weight: bold;
			}
		}
	}
	
	.totalData-wrapper{
		margin-top: $uni-spacing-col-lg;
		.totalData{
			display: flex;
			justify-content: space-between;
			width: 100%;
			.totalData-item{
				width: calc(50% - 5px);
				// background-color: $themeColor;
				border-radius: $uni-border-radius-xl;
				padding: $uni-spacing-col-base $uni-spacing-col-lg;
				.totalData-item-tip{
					display: inline-block; 
					padding: 5px 0px;
					width: 80px;
					text-align: center; 
					color: #fff;
					position: relative;top: -8px;
					left: 50%;
					margin-left: -40px;
					margin-bottom: $uni-spacing-col-lg;
					border-bottom-left-radius: 8px;
					border-bottom-right-radius: 8px;
				}
				.totalData-num{
					color: $uni-color-error;
					font-size: $uni-font-size-lg;
					font-weight: bold;
					line-height: 30px;
					display: flex;
					justify-content: center;
				}
				.totalData-item-view{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.circle{
						margin-right: 10px;
						border-radius: 50%;
						display: inline-block;
						width: 8px;
						height: 8px;
						background-color: #527efa;
					}
				}
			}
			.totalData-item:nth-child(1){
				.totalData-item-view{
					.circle{
						background-color: #527efa;
					}
				}
				
				.totalData-item-tip{
					background-color: #527efa;
					box-shadow: R(0px) R(15px) R(20px) R(-7px) rgba(82, 126, 250, 0.8);
				}
				// background-color: #dde7ff;
				background-image: url('../../common/images/data/bg1.png');
				background-size: 100%;
			}
			.totalData-item:nth-child(2){
				.totalData-item-view{
					.circle{
						background-color: #3dbfab;
					}
				}
				.totalData-item-tip{
					background-color: #3dbfab;
					box-shadow: R(0px) R(15px) R(20px) R(-7px) rgba(61, 191, 171, 0.8);
				}
				background-image: url('../../common/images/data/bg2.png');
				background-size: 100%;
			}
		}
	}
	
	.chart-wrapper{
		border: 1px solid #ddd; 
		border-radius: 10px;
		padding: 15px;
		margin-top: 15px;
		background: #fff;
		.chart-wrapper-title{
			display: flex;
			justify-content: space-between;
		}
		.chart-switch-box{
			background-color: #7B4EFF;
			border-radius: 20px;
			padding: 2px;
			.chart-switch{
				display: inline-block; 
				background-color: #7B4EFF;
				color: #fff;
				padding: 4px 8px;
				border-radius: 20px;
				
			} 
			.chart-switch-active{
				background-color: #fff;
				color: #7B4EFF;
			}
		}
	}
	
	
	.content-before {
		content: "";
		position: absolute;
		display: block;
		left: R(-20px);
		width: R(14px);
		height: R(14px);
		background-color: #008EFD;
		margin-top: R(15px);
		border-radius: R(50);
	}

	.container {
		padding-bottom: R(150);
	}

	.header-bg {
		background: url(../../common/images/home-new/bg-up.png) no-repeat;
		background-size: 100% 100%;
		padding: R(20px) 0;
		// display: flex;
		align-items: center;
		// position: relative;
		height: R(400px);
		color: #fff;
		margin-bottom: R(80px);

		.title {
			// width: 100%;
			height: R(100px);
			line-height: R(100px);
			font-size: R(40px);
			color: #FFFFFF;
			text-align: center;
		}
	}

	.e-content {
		padding: R(20) R(20) 0;
		// margin: R(-300) R(25) 0;
		height: R(491px);
		background: #ffffff;
		box-shadow: 0px R(17px) R(16px) 0px rgba(11, 51, 116, 0.19);
		border-radius: R(20px);

		.filter {
			font-size: R(28px);
			font-weight: 400;
			color: #666666;
			justify-content: space-between;
			margin-bottom: R(20);
			padding: 0 R(20px);

			.type {
				position: relative;

			}

			.type::before {
				@extend .content-before;
			}

			.icon-xiajiantou {
				font-size: R(24);
				margin-left: R(14);
			}
		}
	}

	.daily-data-box {
		padding: R(30);
		background-color: #FFFFFF;
		box-shadow: 0 R(1px) R(10px) R(1px) rgba(137, 203, 254, 0.41);
		padding: R(20) R(20) 0;
		margin: R(40px)R(25px);
		border-radius: R(20px);

		&-middle {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.date {
				font-size: R(20px);
				color: #909CB3;
				flex: 1;
			}

			.tab {
				flex: 2;
				text-align: right;
				    &-item {
				      padding: R(0) R(16);
				      background: #e6e6e6;
				      text-align: center;
				      display: inline-block;
				      margin-left: 0.1rem;
				      border-radius: R(50);
				    }
				    .active {
				      background: #2998ff;
				      color: white;
					  border-radius: R(50);
				    }
			}
		}
	}

	.tag-title {
		font-size: R(30px);
		font-weight: 500;
		color: #000000;
		margin: R(20);

		.name {
			position: relative;
		}

		// padding: 0 R(36);
		.name::before {
			@extend .content-before;
		}
	}

	.tag-title2 {
		@extend .tag-title;
		margin-top: 0;
	}

	.data-box {
		// margin: 0 R(35) R(30);
		padding-top: R(10);
		// box-shadow: 0px R(6px) R(10px) 0px rgba(11, 171, 254, 0.2);
		border-radius: R(10);
		color: #595959;
		position: relative;
		overflow: hidden;
		// background: url('../../common/images/data/nav-bg.png');
		background-size: 100% 100%;

		.nav-box {
			text {
				display: inline-block;
				// padding: R(20) 0;
				color: #1a1a1a;
				width: 25%;
				text-align: center;
				font-size: R(28px);
			}

			.active {
				// border-bottom-right-radius: R(20);
			}
		}

		.d-bg-b {
			padding: R(20) R(22) R(24);
			// background: linear-gradient(to right, #a9b3f7, #c3ddf8);
		}

		.p-title {
			position: absolute;
			// background: url(@/common/images/home-icon/quan.png);
			background-size: 100% 100%;
			top: R(-62);
			left: 50%;
			transform: translateX(-50%);
			width: R(484);
			height: R(67);
			line-height: R(67);
			font-size: R(30px);
			font-weight: bold;
			color: #ffffff;
			text-align: center;
		}

		.l-box {
			overflow-x: scroll;
			white-space: nowrap;
			height: R(200);

			.d-box {
				padding: R(20px) R(30px);
				min-width: R(240px);
				background: #f6e7ee;
				text-align: center;
				display: inline-block;
				box-shadow: 0px R(10px) R(18px) 0px rgba(64, 93, 174, 0.18);
				border-radius: R(20px);
				margin-right: R(20);
			}

			.tradingBox {
				width: 48%;
			}

			.sub-title {
				font-size: R(26px);
				font-weight: 400;
				color: #262626;
				margin: R(20) R(10);
			}

			.title {
				// margin-bottom: R(30);
				margin: R(20px) 0;
				font-size: R(25px);
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #3E4D67;
			}

			.num {
				font-size: R(43px);
				font-family: Source Han Sans CN;
				// font-weight: bold;
				color: #0d0d0d;
			}

			.margin1 {
				margin-bottom: R(30);
			}

			.setMargin2 {
				margin-right: R(30);
			}
		}
	}

	.content-box {
		padding: R(30);
		background-color: #FFFFFF;
		box-shadow: 0 R(1px) R(10px) R(1px) rgba(137, 203, 254, 0.41);
		padding: R(20) R(20) 0;
		margin: R(40px)R(25px);
		border-radius: R(20px);

		.tag-title2 {
			position: relative;
		}

		.tag-title2::before {
			content: "";
			position: absolute;
			display: block;
			left: R(-20px);
			width: R(14px);
			height: R(14px);
			background-color: #008EFD;
			margin-top: R(15px);
			border-radius: R(50);
		}
	}

	.module-list {

		// margin: 0 R(30);
		flex-wrap: wrap;


		.item {
			width: 48%;
			color: #fff;
			min-height: R(180px);
			margin-bottom: R(25);
			background-size: 100% 100%;
			// padding: R(41) 0 R(30) R(28);
			position: relative;

			.name {
				font-size: R(30);
				font-weight: bold;
				margin-bottom: R(13);
				position: absolute;
				left: 0;
				top: 0;
				font-size: R(25px);
				width: R(180px);
				height: R(39px);
				line-height: R(39px);
				text-align: center;
				color: #FFFFFF;
			}

			.sub {
				font-size: R(24);
				font-weight: 400;
				width: 55%;
				line-height: R(35);
				margin-top: R(60px);
				margin-left: R(10px);
				font-size: R(20px);
			}

			.info {
				// margin-top: R(60px);
				margin-left: R(10px);
				font-size: R(24);
				font-weight: 400;
			}
		}
	}

	.echart {
		width: 100%;
		height: 190px;
		z-index: 9999;
		position: relative;

		.none {
			padding-top: R(140);
			text-align: center;
			color: #999;
		}
	}
</style>
